<template>
  <div class="block general">
    <div class="block-title">
      <div class="block-options pull-right">
        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default toggle-bordered enable-tooltip"
           data-toggle="button" title="" style="overflow: hidden; position: relative;"
           data-original-title="Toggles .form-bordered class">Borderless</a>
      </div>
      <h2>前端后台模板生成</h2>
    </div>
    <form enctype="multipart/form-data" class="form-horizontal form-bordered">
      <div class="form-group">
        <label class="col-md-3 control-label" for="example-text-input">控制器名称</label>
        <div class="col-xs-6">
          <input type="text" id="example-text-input" v-model.lazy="controller" name="example-text-input"
                 class="form-control" placeholder='请填写控制器名称...'>
          <span class="help-block">.......</span>
        </div>
      </div>
      <!--<div class="form-group">
        <label class="col-md-3 control-label" for="example-select">Select</label>
        <div class="col-md-6">
          <select id="example-select" name="example-select" class="form-control" size="1">
            <option value="0">Please select</option>
            <option value="1">HTML</option>
            <option value="2">CSS</option>
            <option value="3">Javascript</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label" for="example-password">Password</label>
        <div class="col-md-6">
          <input type="password" id="example-password" name="example-password" class="form-control"
                 placeholder="Password">
        </div>
      </div>-->
      <div class="form-group" v-if="fields_index.length!==0">
        <label class="col-md-3 control-label">列表页字段</label>
        <div class="col-md-9">
          <label class="checkbox-inline" :for="'controller_'+index" v-for="(field,index) in fields_index">
            <input type="checkbox" :id="'controller_'+index" v-model="indexList" :value="field.name"
                   name="example-inline-checkbox1">{{field.title}}
          </label>
        </div>
      </div>
      <div class="form-group" v-if="fields_add.length!==0">
        <label class="col-md-3 control-label">新建资源字段</label>
        <div class="col-md-9">
          <label class="checkbox-inline" :for="'controller_plus_'+index_plus"
                 v-for="(field_plus ,index_plus) in fields_add">
            <input type="checkbox" name="example-inline-checkbox1" :id="'controller_plus_'+index_plus" v-model="addList"
                   :value="field_plus.name"> {{field_plus.title}}
          </label>
        </div>
      </div>
      <div class="form-group" v-if="fields_edit.length!==0">
        <label class="col-md-3 control-label">修改资源字段</label>
        <div class="col-md-9">
          <label class="checkbox-inline" :for="'controller_odd_'+index_odd"
                 v-for="(field_odd,index_odd) in fields_edit">
            <input type="checkbox" name="example-inline-checkbox1" :id="'controller_odd_'+index_odd" v-model="editList"
                   :value="field_odd.name"> {{field_odd.title}}
          </label>
        </div>
      </div>
      <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-3">
          <button type="button" class="btn btn-effect-ripple btn-primary" style="overflow: hidden; position: relative;"
                  @click="template_insert">
            生成模板
          </button>
          <button type="reset" class="btn btn-effect-ripple btn-danger" style="overflow: hidden; position: relative;">
            重置
          </button>
        </div>
      </div>
    </form>
    <transition name="loading" mode="out-in">
      <loading v-show="loadAt">

      </loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import fetch from '../../static/comm/fetch';
  import {mapState, mapMutations} from 'vuex';
  import loading    from '../../components/comment/loading/loading';
  import _    from 'lodash';
  const ERROR_CODE = 1001;
  export default {
    name: 'general',
    data(){
      return {
        controller: '',
        fields_index: [],
        fields_add: [],
        fields_edit: [],
        addList: [],
        indexList: [],
        editList: [],
        test_data: [],
        field_names: {status: {0: 'hello', 1: 'nimei'}}
      }
    },
    created(){
      let users = [
        {'user': 'Fred', 'age': 48},
        {'user': 'barney', 'age': 34},
        {'user': 'fred', 'age': 42},
        {'user': 'barney', 'age': 36}
      ]

    console.debug(_.map(_.sortByOrder(users, ['user', 'age'], ['asc', 'desc']), _.values));


      console.debug(_.values(_.sortByOrder(users, ['age', 'user'], ['asc', 'desc'])))
      console.debug(_.values('kill'));

      let test = [{status: 1, name: 'hello'}, {fiels: '111', name: '222'}];
      //_(test).forEachRight((value)=>{console.debug(value)}).value()
      test.forEach((value) => {
        let keys = Object.keys(value);
        keys.forEach((item) => {
          if (item in this.field_names) {
            value[item] = this.field_names[item][value[item]]
          }
        });
      });
      this.test_data = [...test]
    },
    computed: {
      ...mapState({loadAt: 'loading'})
    },
    methods: {
      ...mapMutations({
        set_loadAt: 'set_loading'
      }),
      general_filed(controller){
        this.set_loadAt({code: 100, meta: true});
        let data = {controller: controller};
        this.apiPost('/api/admin/general/column_config', data).then((response) => {
          this.$nextTick(() => {
            let response_data = response.data;
            let error_code = response_data.status;
            if (error_code !== ERROR_CODE) {
              response_data.data.forEach((value) => {
                value.status = false;
              });
              this.fields_add = this.fields_edit = this.fields_index = response_data.data;
              this.set_loadAt({code: 120, meta: false, custom_info: response_data.info});
            }
          });
        }).catch((response) => {
          this.set_loadAt({code: 102, meta: false});
        })
      },
      template_insert(){
        this.set_loadAt({code: 100, meta: true});
        let data = {};
        data.addField = this.addList;
        data.editField = this.editList;
        data.indexField = this.indexList;
        data.module = this.controller;
        this.apiPost('/api/admin/general/general_tpl_vue', data).then((response) => {
          let response_data = response.data;
          let error_code = response_data.status;
          if (error_code !== ERROR_CODE) {
            this.set_loadAt({code: 120, meta: false, custom_info: response_data.info});
          }else {
            this.set_loadAt({code: 120, meta: false, custom_info: response_data.info});
          }
        }).catch((response) => {
          this.set_loadAt({code: 102, meta: false});
        });
      },
      //  测试
      test_fetch(){
        let myHeader = new Headers();
        myHeader.append('authKey', '123456789');
        myHeader.append('sessionId', '564879123');
        fetch('/api/admin/general/column_config', {
          method: 'POST',
          headers: myHeader,
          mode: 'cors',// 避免cors攻击
          credentials: 'include',
          body: JSON.stringify({
            test: 'nimei'
          })
        }).then((response) => {
          response.json().then((data) => {
            console.debug(data);
          })
        }).catch((err) => {
          console.log(err)
        });
        console.debug(111);

      },
    },
    watch: {
      controller(value, old){
        this.general_filed(value.trim());
      }
    }, mixins: [http],
    components: {loading}
  }
</script>
<style type="stylus" scoped>
  .loading-enter-active, .loading-leave-active {
    transition: all .4s;
  }

  .loading-enter, .loading-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
